<template>
<div id="map">
	<div id="container"></div>
	<div class="tool">
		<ul>
			<li class="cj" @click="cj()">测距</li>
			<li class="lk" @click="lk()">路况</li>
			<li class="wx" @click="wx()">卫星图</li>
		</ul>
	</div>
	<!--地理编码-->
	<div class="input-card" style='width:28rem;'>
	    <label style='color:grey'>地理编码，根据地址获取经纬度坐标</label>
	    <div class="input-item">
	            <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
	            <input id='address' type="text" value='佛山财富大厦' >
	    </div>
	    <div class="input-item">
	            <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
	            <input id='lnglat' disabled type="text">
	    </div>
	    <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />
	</div>
	 <!--路网区分-->
	 <div class="selectBox">
	    <div class="selectHeader"><span class="content">道路路网</span></div>
	    <div class="selectIcon"><img src="../assets/up.png" class="selectIconUp"></div>
	    <ul class="selectContent">
	        <li><span class="content">国道</span></li>
	        <li><span class="content">市道</span></li>
	        <li><span class="content">县、乡道</span></li>
	    </ul>
	</div>
	<!--行政区查询-->
	<div id="tip">
	    <!--<div class="searchPlace">
	    	<span class="condition">查询条件</span>
	    </div>	-->
	    <div class="searchSelect">
	    	区：<select id='district' style="width:100px"></select>
	    	<!--街道：--><select id='street' style="width:100px"></select>
	    </div>
	</div>
</div>
		

</template>

<script>
	import $ from 'jquery';
	export default{
		
		data(){
			return{
				map:"",
				lkFlag:false,
				trafficLayer:"",
				wxFlag:false,
				polygons:[],
				city:"",
				district:"",
				fscity:[]
			}
		},
		
		
		
		mounted() {
			
			//创建一个地图
			this.map = new AMap.Map('container', {
				resizeEnable:true,
				zoom:17,
				center:[113.107901,22.995755],
				
	//			pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
	//  		viewMode:'3D' // 地图模式
				mapStyle: 'amap://styles/macaron'//设置地图样式
			})
			
			//创建实时路况图层
			this.trafficLayer = new AMap.TileLayer.Traffic({
			        zIndex: 10
			 });
			
			
			this.layers = [new AMap.TileLayer.Satellite()]
			 
			var that = this;
			AMap.plugin(['AMap.ToolBar','AMap.Driving','AMap.Scale','AMap.MapType','AMap.OverView','AMap.RangingTool','AMap.DistrictSearch'],function(){//异步同时加载多个插件
				//放大缩小平移
//				    var toolbar = new AMap.ToolBar();
//				    that.map.addControl(toolbar);
//				    var driving = new AMap.Driving();//驾车路线规划
//				    driving.search(/*参数*/)
				    var scale = new AMap.Scale();
				    that.map.addControl(scale);
//				    var type = new AMap.MapType();
//				    that.map.addControl(type);
//				    var view = new AMap.OverView();
//				    view.open();
//				    map.addControl(view);
//				    //实时路况图层
//		    		var trafficLayer = new AMap.TileLayer.Traffic({
//				        zIndex: 10
//				    });
//				    map.add(trafficLayer);//添加图层到地图
					
			});
			
			//分别显示高速省道国道
			$(".selectHeader,.selectIcon").click(function () {
	        $(".selectIcon img").toggleClass("selectIconUp");
	        $(".selectContent").toggle();
		    });
		    $(".selectContent >li").click(function () {
		        var str = $(this).children().text();
		        $(".selectHeader span").text(str);
		        $(".selectContent").toggle();
		        if(this.innerText == "国道"){
		        	that.map.setZoom(8)
		        }
		        else if(this.innerText == "市道"){
		        	that.map.setZoom(12)
		        }
		        else if(this.innerText == "县、乡道"){
		        	that.map.setZoom(17)
		        }
		    })
			//地理编码
		    var geocoder,marker;
		    function geoCode() {
		        if(!geocoder){
		            geocoder = new AMap.Geocoder({
//				                city: "010", //城市设为北京，默认：“全国”
		            });
		        }
		        var address  = document.getElementById('address').value;
		        geocoder.getLocation(address, function(status, result) {
		            if (status === 'complete'&&result.geocodes.length) {
		                var lnglat = result.geocodes[0].location
		                document.getElementById('lnglat').value = lnglat;
		                if(!marker){
		                    marker = new AMap.Marker();
		                    that.map.add(marker);
		                }
		                marker.setPosition(lnglat);
		                that.map.setFitView(marker);
		            }else{alert(JSON.stringify(result))}
		        });
		    }
		    document.getElementById("geo").onclick = geoCode;
		    document.getElementById('address').onkeydown = function(e) {
		        if (e.keyCode === 13) {
		            geoCode();
		            return false;
		        }
		        return true;
		    };
		    
		    
		    
		    
		    //行政区域划分
		    function foshan() {
		        //加载行政区划插件
		        AMap.service('AMap.DistrictSearch', function() {
		            var opts = {
		            	zoom: 16, //地图显示的缩放级别
		                subdistrict: 1,   //返回下一级行政区
		                extensions: 'all',  //返回行政区边界坐标组等具体信息
		                level: 'city'  //查询行政级别为 市
		            };
		            //实例化DistrictSearch
		            that.city = new AMap.DistrictSearch(opts);
		            that.city.setLevel('district');
//		            //行政区查询
		            that.city.search('佛山市', function(status, result) {
		                var bounds = result.districtList[0].boundaries;
		                
		                if (bounds) {
		                    for (var i = 0, l = bounds.length; i < l; i++) {
		                        //生成行政区划polygon
		                        var polygon = new AMap.Polygon({
		                            map: that.map,
		                            //strokeWeight: 1,
		                            path: bounds[i],
		                            fillOpacity: 0.5,
		                            /*fillColor: '#CCF3FF',*/
		                            fillColor:"Transparent",
		                            strokeColor: '#474747'
		                        });
		                        that.fscity.push(polygon);
		                        
		                    }
		                    that.map.setFitView();//地图自适应
		                }
		            });
		        });
		    }
		    foshan();
		    
		    
		    
		    
		    //行政区划查询
		    var opts = {
		        subdistrict: 1,   //返回下一级行政区
		        showbiz:false  //最后一级返回街道信息
		    };
		    this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
		    this.district.search('佛山', function(status, result) {
		        if(status=='complete'){
		            getData(result.districtList[0]);
		            console.log(result)
		        }
		    });
		    function getData(data,level) {
		        var bounds = data.boundaries;
		        if (bounds) {
		            for (var i = 0, l = bounds.length; i < l; i++) {
		                var polygon = new AMap.Polygon({
		                    map: that.map,
		                    strokeWeight: 1,
		                    strokeColor: '#CC66CC',
		                    fillColor: '#CCF3FF',
		                    fillOpacity: 0.2,
		                    path: bounds[i]
		                });
		                that.polygons.push(polygon);
		            }
		            that.map.setFitView();//地图自适应
		        }
		       
		       
		        var areaSelect = document.getElementById('street');
		        //清空下一级别的下拉列表
		        if (level === 'province') {
		            citySelect.innerHTML = '';
		            districtSelect.innerHTML = '';
		            areaSelect.innerHTML = '';
		        } else if (level === 'city') {
		            districtSelect.innerHTML = '';
		            areaSelect.innerHTML = '';
		        } else if (level === 'district') {
		            areaSelect.innerHTML = '';
		        }
		
		        var subList = data.districtList;
		        console.log(subList)
		        if (subList) {
		            var contentSub = new Option('--请选择--');
		            var curlevel = subList[0].level;
		            var curList =  document.querySelector('#' + curlevel);
		            curList.add(contentSub);
		            for (var i = 0, l = subList.length; i < l; i++) {
		                var name = subList[i].name;
		                var levelSub = subList[i].level;
		                var cityCode = subList[i].citycode;
		                contentSub = new Option(name);
		                contentSub.setAttribute("value", levelSub);
		                contentSub.center = subList[i].center;
		                contentSub.adcode = subList[i].adcode;
		                curList.add(contentSub);
		            }
		        }
		        
		    }
		    $("#district").change(function(e){
		    	console.log(this)
		    	for (var i = 0, l = that.polygons.length; i < l; i++) {
		            that.polygons[i].setMap(null);
		        }
		        var option = this[this.options.selectedIndex];
		        
		        var keyword = option.text; //关键字
		        var adcode = option.adcode;
		        that.district.setLevel(option.value); //行政区级别
		        that.district.setExtensions('all');
		        //行政区查询
		        //按照adcode进行查询可以保证数据返回的唯一性
		        var obj = this
		        that.district.search(adcode, function(status, result) {
		            if(status === 'complete'){
		                getData(result.districtList[0],obj.id);
		            }
		        });
		    })
				    
		    
		},
		
		methods:{
			lk(){
				this.lkFlag = !this.lkFlag;
				console.log(this.lkFlag);
				
			    
				if(this.lkFlag == true){
//					this.map.add(this.trafficLayer);//添加图层到地图
					this.trafficLayer.setMap(this.map);
					this.trafficLayer.show();
				}else{
//					this.map.remove(this.trafficLayer);
					this.trafficLayer.hide();
					
				}
			},
		    setCenter(obj){
		        this.map.setCenter(obj[obj.options.selectedIndex].center)
		    },
			cj(){
				//测距
	            var ruler1, ruler2;
	            //默认样式
	            ruler1 = new AMap.RangingTool(this.map);
	            var lineOptions = {
	                strokeStyle: "solid",
	                strokeColor: "#FF33FF",
	                strokeOpacity: 1,
	                strokeWeight: 2
	            };
	            var rulerOptions = {
	                lineOptions: lineOptions
	            };
	            ruler2 = new AMap.RangingTool(this.map, rulerOptions);
				console.log("我是测距")	
                ruler2.turnOff();
                ruler1.turnOn();
			},
			
			wx(){
				this.wxFlag = !this.wxFlag;
				if(this.wxFlag==true){
					console.log(this.wxFlag)
					this.map.add(this.layers)
				}else{
					this.map.remove(this.layers);
				}
			}
		}
	}
	
</script>

<style lang="scss">
	#map{
		position: relative;
	}
	.selectBox {
        margin: 10px 0;
        line-height: 40px;
        width: 18%;
        margin-left: 5%;
        font-size: 14px;
        position: absolute;
        top: 5%;
        right: 20%;
        background: white;
        cursor: pointer;
    }

    .selectHeader {
        border-bottom: 1px solid #cccccc;
        width: 88%;
        border: 1px solid #cccccc;
    }

    .selectContent {
        list-style-type: none;
        display: none;
        position: absolute;
        top: 42px;
        z-index: 2;
        background-color: white;
        width: 88%;
        border-left: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
        left: 0px;
    }

    li {
        border-bottom: 1px solid #c4c6c7;
    }

    .content {
        padding-left: 5%;
    }

    .selectIcon {
        position: absolute;
        right: 1px;
        width: 11%;
        color: red;
        top: 0;
        border: 1px solid #cccccc;
        border-left: 0;
        text-align: center;
    }

    .selectIcon img {
        width: 15px;
        position: relative;
        top: 3px;
    }

    .selectIconUp {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg); /* Firefox */
        -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
        -o-transform: rotate(180deg);
    }
	.amap-scale-text{
		color: white;
	}
	.ranging{
		margin-right: 18%;
	}
	.tool{
		position: absolute;
		top: 10%;
		right: 5%;
		display: inline-block;
		background:white;
		Ul{
			
			li{
				width: 50px;
				cursor: pointer;
				border-right: 1px solid black;
				float: left;
				color: black;
			}
		}
	}
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#container{
		width: 100%;
		height: 935px;
	}
	#tip {
	    background: rgba(0,0,0,.5);
	    padding:0 10px;
	    border: 1px solid silver;
	    /*box-shadow: 3px 4px 3px 0px silver;*/
	    position: absolute;
	    font-size: 12px;
	    left: 10px;
	    /*width: 286px;*/
	   width: 150px;
	    top: 5px;
	    border-radius: 3px;
	    line-height: 39px;
	}
	.searchPlace{
		float: left;
		width: 70px;
		height: 100%;
		line-height: 32px;
		display: none;
		
	}
	.searchSelect{
		/*width: 270px;*/
		width: 130px;
		float: left;
		color: white;
	}
	.offBtn{
		/*padding: 5px 15px;*/
		padding: 5px;
		/*background: red;*/
	}
	#street{
    		display: none;
    }
</style>